<template>
  <div class="shop-cart-box">
    <div class="content">
      <div class="content-left">
        <div class="logo-wrapper" @click="showShopList" >
          <div class="logo" :class="{'highlight':totalCount > 0}">
            <span class="icon-shopping_cart" :class="{'highlight':totalCount > 0}"></span>
          </div>
          <div class="num" v-show="totalCount > 0">{{totalCount}}</div>
        </div>
        <div class="price" :class="{'highlight':totalCount > 0}">
          <span class="cart-price">￥{{totalPrice}}</span>
        </div>
        <div class="dis-fee">
          另需配送费￥{{deliveryPrice}}元
        </div>
      </div>
      <div class="content-right">
        <div class="pay" :class="payClass">{{payDesc}}</div>
        <!--<div class="pay" v-show="totalCount==0">￥{{minPrice}}元起算</div>-->
        <!--<div class="pay no-enough" v-show="totalCount>0 && totalPrice < minPrice">还差￥{{minPrice - totalPrice}}元起算</div>-->
        <!--<div class="pay enough" v-show="totalCount>0 && totalPrice >= minPrice">去结算</div>-->
      </div>
    </div>
    <!--购物车列表-->
    <div class="cart-food-list" v-show="listShow">
      <div class="cart-header">
        <h4>购物车</h4>
        <div class="opat">
          <span class="icon-remove_circle_outline"></span>
          <span class="clear-cart">清空</span>
        </div>
      </div>
      <div class="food-list" ref="listCart" >
        <ul>
          <li class="cart-food-item" v-for="food in selectFoods" :key="food.id">
            <div class="food-item-name">{{food.name}}</div>
            <div class="food-item-price">￥{{food.price * food.count}}</div>
            <div class="add-cart-wrqpper">
              <add-cart :food="food"></add-cart>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <transition name="fade">
      <div class="list-mask"  v-show="listShow"></div>
    </transition>
  </div>
</template>

<script>
  import addCart from '../../components/addcart/addcart'
  import BScroll from 'better-scroll'
    export default {
        name: 'shopcart',
      props: {
          // 选中的食物
          selectFoods: {
            type: Array,
            default () {
              return []
            }
          },
          deliveryPrice: {
            type: Number,
            default: 0
          },
        minPrice: {
            type: Number,
            default: 0
        }
        },
      data () {
          return {
            listShow: false
          }
      },
      created () {
          this._initScroll()
         },
      components: {
        addCart
      },
      methods: {
        _initScroll () {
          this.$nextTick(() => {
            this.listCartScroll = new BScroll(this.$refs.listCart, {
              click: true
            })
          })
        },
        showShopList () {
          this.listShow = !this.listShow
        }
      },
      computed: {
        // listShow () {
        //   if ()
        // },
          // 计算总价格
          totalPrice () {
            let total = 0
            this.selectFoods.forEach((food) => {
              total += food.price * food.count
            })
            return total
          },
        // 计算总件数，这个总件数就是商品的数量
        totalCount () {
          let count = 0
          this.selectFoods.forEach((food) => {
            count += food.count
          })
          return count
        },
        // 描述状态的表示，而且这里必须有计算属性计算，每一次改变都需要更新
        payDesc () {
            if (this.totalPrice === 0) {
              return `￥${this.minPrice}元起送`
            } else if (this.totalPrice < this.minPrice) {
              let diff = this.minPrice - this.totalPrice
              return `还差￥${diff}元起送`
          } else {
              return '去结算'
            }
        },
        // 控制两种不同class的状态
        payClass () {
          if (this.totalPrice < this.minPrice) {
            return 'not-enough'
          } else {
            return 'enough'
          }
        }
      }
    }
</script>

<style scoped>
  .list-mask{
    position: fixed;
    bottom:0;
    left:0;
    top:0;
    width: 100%;
    z-index: 11;
    background-color:rgba(0,0,0,.3);
  }
  .cart-food-list{
    position: fixed;
    z-index: 12;
    width: 100%;
    bottom: 40px;
    left:0;
  }
  .food-list{
    padding: 0 18px;
    max-height: 217px;
    overflow: hidden;
    background: #fff;
    position: relative;
  }
  .cart-header{
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    background: #f3f5f7;
    border-bottom: 1px solid rgba(7,17,27,0.1);
  }
  .food-item-name{
    line-height: 36px;
  }
  .food-item-price{
    line-height: 36px;
    position: absolute;
    right: 90px;
    color: #f01414;
    font-size: 12px;
  }
  .add-cart-wrqpper{
    position: absolute;
    right: 0;
  }
  .shop-cart-box{
    position: fixed;
    bottom: 0;
    background: #131d26;
    height: 48px;
    z-index: 50;
    width: 100%;
  }
  .cart-food-item{
    display: flex;
    padding: 12px 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(7,17,27,.1);
  }
  .logo-wrapper{
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: -10px;
    margin: 0 12px;
    padding: 6px;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #141d27;
  }
  .logo{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    background: #2b343c;
  }
  .logo.highlight{
    background: #00a0dc;
  }
  .num{
    position: absolute;
    top:0;
    right:0;
    width: 24px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 16px;
    font-size: 9px;
    font-weight: 700;
    color:#fff;
    background: #f01414;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);

  }
  .icon-shopping_cart{
    line-height: 44px;
    font-size: 24px;
    color: #80858a;
  }
  .icon-shopping_cart.highlight {
   color:#fff;
  }
  .content{
    display: flex;
    background: #141d27;
    font-size: 0;
    color: rgba(255,255,255,0.4);
  }
  .content-left{
    flex:1;
  }
  .content-right{
    flex:0 0 105px;
  }
  .pay{
    background: #2b333b;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
  }
  pay.no-enough{
    background: #2b333b;
  }
  .pay.enough{
    background: #00b43c;
    color:#fff;
  }
  .price{
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  .price.highlight{
    color:#fff;
  }
  .dis-fee{
    display: inline-block;
    vertical-align: top;
    margin: 12px 0 0 12px;
    line-height: 24px;
    font-size: 10px;
  }
  .cart-price{
    font-size:16px;
    font-weight: 700;
    line-height: 24px;
  }
</style>
